<!--汇创业空间服务-->
<template>
  <div class="spaceContainer">
    <bannerHeader :options="options" class="mar117"> </bannerHeader>
    <!-- 空间特色 -->
    <div class="special">
      <p class="title">空间特色</p>
      <p class="desc">多种增值服务让琐碎工作轻松完成</p>
      <div class="contRepot">
        <swiper
          :options="swiperOption1"
          ref="mySwiper"
          class="special_ul rearrow"
        >
          <swiper-slide
            class="special_li"
            v-for="(item, index) in 4"
            :key="index"
          >
            <div class="recont">
              <el-image
                class="bgimg deimg"
                src="../../static/images/bbi/zz6.jpg"
                fit="cover"
              ></el-image>
              <div class="botcont">
                <p class="bigTitle1">基础服务</p>
                <p class="cont">
                  工商代理 /记账与报税 /政策咨询 /法务 /人力资源/记账与 报税
                  /政策咨询 /法务 /人力资源/
                </p>
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <!-- 空间展示 -->
    <div class="displat">
      <div class="cont">
        <p class="title">空间展示</p>
        <p class="desc">多种增值服务让琐碎工作轻松完成</p>
      </div>
      <swiper :options="swiperOption" ref="mySwiper" class="mySwiper">
        <swiper-slide
          class="service_li"
          v-for="(item, index) in 6"
          :key="index"
        >
          <el-image
            class="swiperImg"
            src="../../static/images/bbi/zb1.jpg"
            fit="cover"
          ></el-image>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
import bannerHeader from '../components/banner'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  components: {
    bannerHeader,
    swiper,
    swiperSlide
  },
  data () {
    return {
      // banner参数
      options: {
        title: '空间展示',
        intro:
          '为您所需提供您所选，打造您专属的办公室，还有多种活动空间，会议室，设备齐全。',
        banner: require('../../static/images/bbi/banner1.jpg')
      },
      // 空间特色
      swiperOption1: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        slidesPerView: 3,
        spaceBetween: 30
      },
      // 空间展示
      swiperOption: {
        // 显示分页
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        spaceBetween: 30,
        slidesPerView: 3,
        autoplay: 1000
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/main.scss";
@import "../assets/css/common.scss";
</style>
